<template>
  <view class="box_content">
    <view class="box">
      <view class="box_word">
        内容
      </view>
      <view class="uni-textarea">
        <textarea class="JTxtArea lg" placeholder-style="color:#999999" placeholder="请输入" :maxlength="300"
          :data-maxnum="reason.length+'/300'" v-model="reason"></textarea>
      </view>
      <view class="upload" @click="upload">
        <image src="../../static/working_condition/shangchuan.png" mode=""></image>
        上传附件
      </view>
    </view>
    <view class="map">
      位置
      <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :markers="covers">
      </map>
    </view>
    <view class="btn">
      <button type="primary" >完成任务</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        reason: '',
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 39.909,
        longitude: 116.39742,
        covers: [{
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '../../../static/location.png'
        }, {
          latitude: 39.90,
          longitude: 116.39,
          iconPath: '../../../static/location.png'
        }]
      };
    },
    methods: {
      upload() {
        var REQUESTCODE = 1;
        var main = plus.android.runtimeMainActivity();
        var Intent = plus.android.importClass('android.content.Intent');
        var intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.setType('*/*'); //设置类型，任意类型
        //intent.setType("image/*");
        //intent.setType("audio/*"); //选择音频
        //intent.setType("video/*"); //选择视频 （mp4 3gp 是android支持的视频格式）
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        main.startActivityForResult(intent, REQUESTCODE);
        main.onActivityResult = function(requestCode, resultCode, data) {
          if (REQUESTCODE == requestCode) {
            var context = main;
            plus.android.importClass(data);
            // 获得文件路径
            var fileData = data.getData();
            var path = plus.android.invoke(fileData, 'getPath');
            console.log('path:' + path);
            // 判断文件类型
            // var resolver = context.getContentResolver();
            // var fileType = plus.android.invoke(resolver, 'getType', fileData);
            // console.log('fileType:' + fileType);
          }
        };
      }
    }
  }
</script>

<style lang="scss">
  .box_content {
    background-color: #F7F7F7;
    width: 100%;
    overflow: hidden;
  }

  .box {
    width: 702rpx;
    height: 600rpx;
    margin: 20rpx auto;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
    overflow: hidden;
  }

  .box_word {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 10rpx 0 0 20rpx;
  }

  .uni-textarea {
    height: 450rpx;
    margin: 0 10rpx 0;
    border-bottom: 1rpx solid #EEEEEE;
  }

  .JTxtArea {
    background-color: #FFFFFF;
    border-radius: 5rpx;
    width: calc(100% - 16rpx);
    // box-sizing: border-box;
    padding: 12rpx 12rpx 35rpx;
    min-height: 60rpx;
    line-height: 40rpx;
    color: #000000;
    position: relative;

    &.sm {
      min-height: 30rpx;
    }

    &.lg {
      min-height: 350rpx;
    }

    &:after {
      content: attr(data-maxnum);
      position: absolute;
      right: 5rpx;
      bottom: 0rpx;
      font-size: 30rpx;
      color: #999999;
    }
  }

  .upload {
    width: 214rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    text-align: center;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #4EA1FF;
    background: #FFFFFF;
    border-radius: 4rpx;
    border: 1rpx solid #E5E5E5;
    margin: 20rpx 0 0 40rpx;

    image {
      margin-right: 15rpx;
      width: 36rpx;
      height: 33rpx;
    }
  }

  .map {
    width: 662rpx;
    height: 500rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 0 auto;
    padding: 20rpx 20rpx 0 20rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
  }
  .btn{
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    }
</style>
